<!DOCTYPE html>
<html>

<head>
    <title>Character List</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.6.1/dist/css/bootstrap.min.css">
    <script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/bootstrap@4.6.1/dist/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/clipboard@2.0.8/dist/clipboard.min.js"></script>
    <link href="index.css" rel="stylesheet">
    <link href="bounce.css" rel="stylesheet">
</head>

<body>
    <div class="container">
        <div class="py-3 text-center">
            <h1>最喜爱角色图鉴</h1>
        </div>
        <div class="row">
            <div class="col-lg-9">
                <div id="scroll-horizontally">
                    <div id="char-imgs-container">
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="row py-3 d-flex flex-row flex-lg-column">
                    <div class="col col-lg-12">
                        <div class="shadow large-image-container">
                            <img id="largeImage" src="assets/none.svg" alt="">
                        </div>
                    </div>
                    <div class="col col-lg-12 mt-4">
                        <h3 id="characterName" class="text-center"></h3>
                        <details class="d-none d-lg-block">
                            <summary>简介 (English)</summary>
                            <p class="character-discription"></p>
                        </details>
                        <p class="d-block d-lg-none character-discription"></p>
                    </div>
                </div>
            </div>
        </div>
        <p class="text-right">Powered by <a href="//anilist.co" target="_blank" class="badge badge-secondary"><img src="https://anilist.co/img/icons/icon.svg" height="15">AniList</a></p>
    </div>
    <script src="index.js"></script>
</body>

</html>